<!--个人信息页面-->
<template>
  <div id="NewFriendInfo">
    <Head title BackType1="1" @PointClick="personInfoOption" :NoticeType2='personStatus==3'></Head>
    <div id="NewFriendInfoMain">
      <div class="boundary"></div>
      <div id="InfoMain">
        <div class="InfoName">
          <img class="NameImg" :src="Pic" alt>
          <div class="InfoNameRight">
            <div class="NameBox">
              <div class="Name">{{nickName}}</div>
              <img src="@/assets/img/Man.png" v-if="gender == 1" alt>
              <img src="@/assets/img/Woman.png" v-if="gender == 2" alt>
              <span v-if="gender == 3">保密</span>
            </div>
            <div class="Account">平台账号：{{platFromID}}</div>
          </div>
        </div>
        <div class="Region">
          <div class="InfoTitle">地区</div>
          <div class="InfoText">{{play}}</div>
        </div>
      </div>
      <div id="Note" @click="bindToEditorsNote">
        <div class="NoteTitle">设置备注</div>
        <img src="@/assets/img/ArrowRight.png" alt>
      </div>
      <div id="Describe" class="MainBox">
        <div class="InfoTitle">个人描述</div>
        <div class="InfoText">{{Sign}}</div>
      </div>
      <div id="Photo">
        <div class="PhotoTitle">个人相册</div>
        <div class="PhotoMain" v-show="hasPhoto">
          <div class="PhotoList">
            <img
              v-for="(PhotoSrc,index) in Photos"
              :key="index"
              :src="PhotoSrc"
              alt
            >
          </div>
          <img id="PhotoMore" v-show="PhotoMore" src="@/assets/img/ArrowRight.png" alt>
        </div>
        <div class="NoPhoto" v-show="!hasPhoto">暂无相册</div>
      </div>
      <div id="source" class="MainBox">
        <div class="InfoTitle">来源</div>
        <div class="InfoText col9">{{source}}</div>
      </div>
      <button id="button" v-if="personStatus==1" @click="addFriend">添加到通讯录</button>
      <button id="button" v-if="personStatus==2" @click="agreeFriend">同意验证</button>
    </div>
    <!--发送消息 已添加好友-->
    <button class="sendData" v-if="personStatus==3" @click="bindSendData">发消息</button>
    <button class="sendData" v-if="personStatus==4" @click="unblacklist">移出黑名单</button>
    <van-actionsheet
      v-model="actionsShow"
      :actions="actions"
      cancel-text="取消"
      @select="onSelect"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import Head from "@/components/Head";
import { Actionsheet, Toast, Dialog} from "vant";
export default {
  data() {
    return {
      Pic:"",
      nickName:"",
      gender: 1,  //性别 1男 2女 3保密
      platFromID:"",
      play:'保密',
      Sign:"",
      PersonId:"",
      Photos: [
        { src: require("@/assets/img/Man.png"), index: 1 },
        { src: require("@/assets/img/Man.png"), index: 2 },
        { src: require("@/assets/img/Man.png"), index: 3 },
        { src: require("@/assets/img/Man.png"), index: 4 }
      ],
      hasPhoto: true,  // 有无图片
      PhotoMore: true,  // 是否有更多的按钮
      source:'',
      friendId:'',  //好友 id
      personStatus: 2, // 底部按钮：1添加好友  2同意好友  3发消息   4移出黑名单
      actionsShow: false,  // 是否弹出底部弹出层
      actions: [  // 底部弹出层内容
        {
          name: "发送名片",
          className: "sendCard",
          path: "/selectcard"
        },
        {
          name: "加入黑名单",
          className: "joinBlackList"
        },
        {
          name: "删除联系人",
          className: "joinBlackList"
        }
      ]
    };
  },
  components: {
    Head,
    [Actionsheet.name]: Actionsheet,
    [Dialog.name]: Dialog,
    [Toast.name]: Toast,
  },
  mounted() {
    this.personStatus = parseInt(this.$route.query.personStatus)
    this.friendId = this.$route.query.id
    if(this.personStatus == 1){
      console.log('1添加好友')
      this.$get(urlConfig.getFriendByPlatformId + this.friendId)
      .then(res => {
        // 遍历头像
        if(res.data.pic != '' && res.data.pic != 'http://cs.api.org/'){
          this.Pic = res.data.pic;
        }else{
          this.Pic = require('@/assets/img/NoPic.png');
        }
        // 遍历昵称
        if(res.data.nickname ==''){
          this.nickName = '暂无昵称'
        }else{
          this.nickName = res.data.nickname;
        }
        // 遍历性别
        this.gender = res.data.sex;
        // 遍历平台账号
        if(res.data.platformId == ''){
          this.platFromID = '暂未添加平台账号'
        }else{
          this.platFromID = res.data.platformId
        }
        // 遍历地区
        // 遍历个人描述
        if(res.data.sign == ''){
          this.Sign = '暂时没有个性签名'
        }else{
          this.Sign = res.data.sign;
        }
        // 遍历个人相册
        if(res.data.pictures.length > 0){
          this.hasPhoto == true;
          this.Photos = res.data.pictures;
        }else{
          this.hasPhoto = false;
          // 遍历来源
          this.source = '号码查找'
        }
      });
    }else if(this.personStatus == 2){
      console.log('2同意好友')
      this.$get(urlConfig.getNewFriendInfo + this.friendId)
      .then(res => {
        // 遍历头像
        if(res.data.pic != '' && res.data.pic != 'http://cs.api.org/'){
          this.Pic = res.data.pic;
        }else{
          this.Pic = require('@/assets/img/NoPic.png');
        }
        // 遍历昵称
        this.nickName = res.data.nickname;
        // 遍历性别
        this.gender = res.data.sex;
        // 遍历平台账号
        if(res.data.platformId == ''){
          this.platFromID = '暂未添加平台账号'
        }else{
          this.platFromID = res.data.platformId
        }
        // 遍历地区
        // 遍历个人描述
        if(res.data.sign == ''){
          this.Sign = '暂时没有个性签名'
        }else{
          this.Sign = res.data.sign;
        }
        // 遍历个人相册
        if(res.data.pictures.length > 0){
          this.hasPhoto == true;
          this.Photos = res.data.pictures;
        }else{
          this.hasPhoto = false;
          // 遍历来源
          this.source = '号码查找'
        }
      });
    }else if(this.personStatus == 3){
      console.log('3发消息')
    }else if(this.personStatus == 4){
      console.log('4移出黑名单')
    }
  },
  methods: {
    
    //设置备注按钮事件
    bindToEditorsNote() {
      this.$router.push("/editorsnote");
    },
    // 点击添加好友按钮事件
    addFriend(){
      this.$router.push({
        path: "/friendsvalidation",
        query: {id:this.PersonId}
      })
    },
    // 点击同意验证按钮事件
    agreeFriend(){
      console.log(this.friendId)
      Dialog.confirm({
        title: '提示',
        message: '是否添加该成员为你的IM好友'
      }).then(() => {
        /**
        * 同意好友申请
        */
        var idtext={
            id:this.friendId,
        }
        console.log(idtext)
        this.$post(urlConfig.updateApplication,idtext)
        .then(res => {
          if(res.code ==200 ){
            Toast.success('添加成功');
            setTimeout(function(){
              Toast.clear()
              this.$router.push({
                path: "/NewFriendInfo",
                query: { 
                  id: this.friendId, 
                  personStatus: 3
                }
              });
            },500)
          }
        })
      }).catch(() => {
        // on cancel
      });
    },
    //点击发送消息按钮事件
    bindSendData() {},
    //点击移出黑名单按钮事件
    unblacklist(){},
    // 点击头部三个点按钮事件
    personInfoOption() {
      this.actionsShow = !this.actionsShow;
    },
    //底部出现上拉菜单，
    onSelect(item) {
      this.actionsShow = false;
      this.$router.push(item.path);
    },
    //底部出现上拉菜单，
    onCancel() {},
    
  },
  
};
</script>

<style scoped lang='less'>
#NewFriendInfo {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 28px;
  background-color: #f1f5f8;
  .boundary {
    width: 100%;
    height: 12px;
    background-color: #ffffff;
  }
  #NewFriendInfoMain {
    position: absolute;
    top: 88px;
    bottom: 0;
    overflow: scroll;
    z-index: 10;
    #InfoMain {
      background: #fff;
      padding-left: 30px;
      .InfoName {
        // border-bottom: 1px solid #e2e2e2;
        display: flex;
        flex-direction: row;
        min-height: 210px;
        .NameImg {
          width: 128px;
          height: 128px;
          margin-left: 20px;
          border-radius: 10px;
        }
        .InfoNameRight {
          padding-left: 42px;
          .NameBox {
            width: 500px;
            display: flex;
            flex-direction: row;
            padding-right: 30px;
            .Name {
              font-size: 42px;
              max-width: 430px;
              line-height: 50px;
              color: #000;
              font-family: PingFangSC-Medium;
            }
            img {
              padding: 7px 0 7px 34px;
              width: 36px;
              height: 36px;
            }
            span{
              padding: 7px 0 7px 34px;
              width: 70px;
              height: 36px;
              line-height: 36px;
              color: #999;
            }
          }
          .Account {
            margin-top: 26px;
            font-size: 28px;
            margin-bottom: 30px;
            width: 500px;
            color: #999;
          }
        }
      }
      .Region {
        padding-right: 30px;
        width: 690px;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 20px 30px 20px 0;
        min-height: 50px;
        .InfoTitle {
          width: 130px;
        }
        .InfoText {
          line-height: 40px;
          width: 560px;
        }
      }
    }
    #Note {
      padding: 0 30px;
      height: 90px;
      background: #fff;
      margin-top: 10px;
      align-items: center;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .NoteTitle {
        width: 120px;
      }
      img {
        width: 20px;
        height: 32px;
      }
    }
    .MainBox {
      background: #fff;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 20px 30px;
      min-height: 50px;
      margin-top: 10px;
      width: 690px;
      .InfoTitle {
        width: 130px;
      }
      .InfoText {
        line-height: 40px;
        width: 560px;
      }
      .col9 {
        color: #999;
      }
    }
    #Photo {
      padding: 0 30px;
      margin-top: 10px;
      min-height: 90px;
      background: #fff;
      display: flex;
      align-items: center;
      flex-direction: row;
      .PhotoTitle {
        width: 130px;
        max-height: 180px;
      }
      .PhotoMain {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 560px;
        .PhotoList {
          display: flex;
          flex-wrap: wrap;
          width: 520px;
          justify-content: start;
          height: 140px;
          overflow: hidden;
          padding: 20px 0;
          img {
            width: 110px;
            height: 110px;
            margin: 15px 9px;
            border-radius: 10px;
          }
        }
        #PhotoMore {
          width: 20px;
          height: 32px;
        }
      }
      .NoPhoto {
        color: #999;
      }
    }
    #button {
      margin: 120px 35px;
      width: 680px;
      height: 90px;
      border-radius: 10px;
      background: #627df1;
      font-size: 32px;
      color: #fff;
      &:active {
        background: #4868f2;
      }
    }
  }
  .sendData {
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background-color: #627df1;
    text-align: center;
    line-height: 90px;
    font-size: 32px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
  .sendCard {
    height: 115px;
    span {
      font-size: 40px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(0, 122, 255, 1);
      line-height: 115px;
    }
  }
  .joinBlackList {
    height: 115px;
    font-size: 40px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(255, 59, 48, 1);
    line-height: 115px;
  }

  .van-actionsheet__cancel {
    font-size: 40px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(0, 122, 255, 1);
  }
}
</style>
